<template>
  <view v-if="detailData" class="box">
    <view class="context">
      <view class="title">{{ detailData.topicName }}</view>
      <view class="ul">
        <view
          v-for="(item, index) in detailData?.context"
          :key="index"
          class="li"
        >
          <view class="xh-box">
            <view class="xh">{{ index + 1 }}</view>
          </view>

          <view>
            <view class="original-box">
              <text class="original-title"> 原文: </text>
              <text class="original-text">{{ item.original }}</text>
            </view>

            <view v-if="current === 1" class="norms-box">
              <text class="norms-title"> 规范表达: </text>
              <text class="norms-text">{{ item.norms }}</text>
            </view>
          </view>
        </view>
      </view>

      <view class="action-box">
        <uni-segmented-control
          :current="current"
          :values="['原文', '规范表达']"
          :style-type="'button'"
          :active-color="'#007aff'"
          @click-item="onClickItem"
        />
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { isEmpty } from 'lodash-es'

import { shenLunService } from '@/apis'

const current = ref(0)

const onClickItem = (e: any) => {
  current.value = e.currentIndex
}

const detailData = ref<Partial<shenLunService.ShenLunNormsWords>>()

onLoad(async (e: any) => {
  if (isEmpty(e?.id)) {
    return
  }
  const res = await shenLunService.getDetail({
    id: e.id,
  })

  if (res.status) {
    detailData.value = res.data
    return
  }
})
</script>
<style lang="scss" scoped>
.box {
  width: 100%;
  height: 100vh;
  box-sizing: border-box;
  padding: 20rpx;

  .context {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 20rpx;
    background-color: #fff;
    border-radius: 20rpx;
    > .title {
      width: 100%;
      height: 50rpx;
      box-sizing: border-box;
      background-color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1rem;
      font-weight: 700;
    }

    .ul {
      width: 100%;
      height: calc(100% - 175rpx);

      .li {
        width: 100%;
        background-color: #f5f7fa;
        margin-top: 20rpx;
        border-radius: 20rpx;
        box-sizing: border-box;
        padding: 20rpx;
        display: flex;
        align-items: center;

        .xh-box {
          width: 50rpx;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 15rpx;

          .xh {
            width: 30rpx;
            height: 30rpx;
            border-radius: 50%;
            background-color: #7cb342;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
          }
        }

        .original-box {
          margin-top: 20rpx;
          font-size: 0.8rem;

          .original-title {
            font-size: 0.9rem;
            font-weight: 700;
            margin-right: 10rpx;
          }
        }

        .norms-box {
          margin-top: 20rpx;

          .norms-title {
            font-size: 0.9rem;
            font-weight: 700;
            margin-right: 10rpx;
          }
        }
      }
    }
  }

  .action-box {
    width: 100%;
    box-sizing: border-box;
    padding: 0 5rpx;
  }
}
</style>
